<template>
  <div class="td-box" ref="can"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import editStore from "@/store/editStore";

const store = editStore();

let can = ref();
let render = "";
let sense = new THREE.Scene();
sense.background = new THREE.Color("rgb(214, 220, 242)");

let reel = store.reelConfig;
let camera = new THREE.PerspectiveCamera(30, 1, 1, 5000);
camera.lookAt(0, 0, 0);
camera.position.set(0, reel.reelDiameter * 10, 0);

let AmbientLight = new THREE.AmbientLight("#fff", 1);
sense.add(AmbientLight);

let Cylinder = new THREE.CylinderGeometry(
  reel.reelDiameter,
  reel.reelDiameter,
  reel.reelThickness,
  60
);
let fimg = new Image();
let oimg = new Image();
fimg.src = store.reelImage[0];
oimg.src = store.reelImage[1];

fimg.width = reel.width;
fimg.height = reel.height;
oimg.width = reel.width;
oimg.height = reel.height;

const ftexture = new THREE.Texture(fimg);
const otexture = new THREE.Texture(oimg);

fimg.onload = function () {
  ftexture.needsUpdate = true;
  render.render(sense, camera);
};
oimg.onload = function () {
  otexture.needsUpdate = true;
};

let Material1 = new THREE.MeshBasicMaterial({
  map: ftexture,
  color: "rgb(53,95,147)",
});
let Material2 = new THREE.MeshBasicMaterial({
  map: otexture,
  color: "rgb(53,95,147)",
});
let Material3 = new THREE.MeshBasicMaterial({
  color: "#444",
});
let maters = [Material3, Material1, Material2];

let mesh = new THREE.Mesh(Cylinder, maters);
mesh.position.set(0, 0, 0);
mesh.rotation.set(0, Math.PI / 2, 0);

sense.add(mesh);

let axes = new THREE.AxesHelper(500);
sense.add(axes);

onMounted(() => {
  render = new THREE.WebGLRenderer({
    antialias: true,
  });
  render.setSize(can.value.offsetWidth, can.value.offsetHeight);
  render.setPixelRatio(window.devicePixelRatio);

  let controls = new OrbitControls(camera, render.domElement);
  controls.addEventListener("change", () => {
    render.render(sense, camera);
  });
  can.value.appendChild(render.domElement);
  render.render(sense, camera);
});
</script>
<style scoped lang="scss">
.td-box {
  width: 100%;
  height: 100%;
}
</style>
